<template>
	<view class="contain">
		<view class="flex f-a-c f-j-c padding-15 f26-size f-w-500">Sign In Or Sign up</view>
		<view v-if="type == 'sign'" class="padding-15">
			<view class="padding-lr20 f-w-500 f18-size flex f-a-c h-50 bg-color-f7">SIGN IN</view>
			<view class="flex f-a-c padding-tb10 margin-t12">
				<text class="t-color-r margin-r4">*</text>
				<text class="t-color-6">Email</text>
			</view>
			<view class="h-40 b-color-e">
				<input v-model="name" class="input padding-lr12" type="text" value="" placeholder-class="t-color-9" placeholder="Email Address" />
			</view>
			<view class="flex f-a-c padding-tb10 margin-t12">
				<text class="t-color-r margin-r4">*</text>
				<text class="t-color-6">Password</text>
			</view>
			<view class="h-40 b-color-e">
				<input v-model="password" class="input padding-lr12" type="password" value="" placeholder-class="t-color-9" placeholder="Password" />
			</view>
			<view class="padding-tb10"></view>
			<view @click="login" class="flex f-a-c f-j-c h-40 bg-color-0 t-color-w margin-t20">
				<image class="w-18 margin-r6" src="../../static/images/login.png" mode="widthFix"></image>
				<text>Sign In</text>
			</view>
			<view @click="type='register'" class="flex f-a-c f-j-c h-40 b-color-3 t-color-0 margin-t20">
				<image class="w-18 margin-r6" src="../../static/images/register.png" mode="widthFix"></image>
				<text>Register</text>
			</view>
		</view>
		<view v-else class="padding-15">
			<view class="padding-lr20 f-w-500 f18-size flex f-a-c h-50 bg-color-f7">NEW ACCOUNT</view>
			<view class="flex f-a-c padding-tb10 margin-t12">
				<text class="t-color-r margin-r4">*</text>
				<text class="t-color-6">Email</text>
			</view>
			<view class="h-40 b-color-e">
				<input v-model="name" class="input padding-lr12" type="text" value="" placeholder-class="t-color-9" placeholder="Email Address" />
			</view>
			<view class="flex f-a-c padding-tb10 margin-t12">
				<text class="t-color-r margin-r4">*</text>
				<text class="t-color-6">Password</text>
			</view>
			<view class="h-40 b-color-e">
				<input v-model="password" class="input padding-lr12" type="password" value="" placeholder-class="t-color-9" placeholder="Password" />
			</view>
			<view class="flex f-a-c padding-tb10 margin-t12">
				<text class="t-color-r margin-r4">*</text>
				<text class="t-color-6">Confirm Password</text>
			</view>
			<view class="h-40 b-color-e">
				<input v-model="cPassword" class="input padding-lr12" type="password" value="" placeholder-class="t-color-9" placeholder="Confirm Password" />
			</view>
			<view class="padding-tb10"></view>
			<view @click="register" class="flex f-a-c f-j-c h-40 bg-color-0 t-color-w margin-t20">
				<image class="w-18 margin-r6" src="../../static/images/register.png" mode="widthFix"></image>
				<text>Register</text>
			</view>
			<view @click="type='sign'" class="flex f-a-c f-j-c h-40 b-color-3 t-color-0 margin-t20">
				<image class="w-18 margin-r6" src="../../static/images/register.png" mode="widthFix"></image>
				<text>Sign In</text>
			</view>
		</view>
		
	</view>
</template>
<style scoped>
</style>
<script>
	import {md5} from '@/utils/md5.js'
	const $ = require('@/utils/api.js');
	let self = this;
	export default {
		components: {},
		data() {
			return {
				type: 'sign',
				name: '',
				password: '',
				cPassword: ''
			};
		},
		onLoad: function(options) {
			self = this;
			this.type = options.type ? options : 'sign';
			this.init();
		},
		onShow() {
		},
		methods: {
			login() {
				if(self.name == ''){
					$.$toast('err')
					return
				}
				if(self.password == ''){
					$.$toast('err')
					return
				}
				$.ajax({
					url: '/v1/tk_shop/user/login',
					data: {
						email: self.name,
						password: md5(self.password),
					},
					method: 'POST',
					success(res) {
						$.$toast('Login Success');
						uni.setStorageSync('token',res.data.token);
						self.go('/pages/index/detail');
					}
				})
			},
			register() {
				if(self.name == ''){
					$.$toast('please enter login account')
					return
				}
				if(self.password == ''){
					$.$toast('please enter a new login password')
					return
				}
				if(self.cPassword == ''){
					$.$toast('please enter the confirmation new password')
					return
				}
				$.ajax({
					url: '/v1/tk_shop/user/register',
					loading: true,
					data: {
						email: self.name,
						password: md5(self.password),
						confirm_password: md5(self.cPassword),
					},
					method: 'POST',
					success(res) {
						$.$toast('Register Success');
						self.type = 'sign';
					}
				})
			},
			init() {},
		},
		computed: {},
		created() {
		},
		mounted() {},
		destroyed() {},
		onPullDownRefresh() {
		},
		onReachBottom() {
			
		}
	}
</script>